<template>
  <div class="theme-selector">
    <div class="theme-header">
      <h3 class="theme-title">主题色设置</h3>
      <p class="theme-description">选择您喜欢的主题色彩</p>
    </div>
    
    <div class="theme-grid">
      <div 
        v-for="theme in themes" 
        :key="theme.id"
        class="theme-option"
        :class="{ active: currentTheme === theme.id }"
        @click="selectTheme(theme.id)"
      >
        <div class="theme-preview" :style="{ background: theme.preview }">
          <div class="theme-preview-accent" :style="{ background: theme.accent }"></div>
        </div>
        <div class="theme-info">
          <span class="theme-name">{{ theme.name }}</span>
          <span class="theme-desc">{{ theme.description }}</span>
        </div>
        <div class="theme-check" v-if="currentTheme === theme.id">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import themeService from '../../services/ThemeService.js'

// 获取主题数据
const themes = ref(themeService.getAllThemes().map(theme => ({
  ...theme,
  preview: `linear-gradient(135deg, ${theme.colors['--primary-50']} 0%, ${theme.colors['--primary-100']} 100%)`,
  accent: theme.colors['--primary-600']
})))

const currentTheme = ref(themeService.getCurrentTheme())

// 选择主题
const selectTheme = (themeId) => {
  currentTheme.value = themeId
  themeService.applyTheme(themeId)
}

// 初始化
onMounted(() => {
  currentTheme.value = themeService.getCurrentTheme()
})
</script>

<style scoped>
@import './index.css';
</style>
